import React from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile';
import { AppOutline, MessageOutline, MessageFill, UserOutline, AppstoreOutline } from 'antd-mobile-icons';
import { LocationProvider } from './context/LocationContext';

export default function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const tabs = [
    {
      key: '/app/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/app/class',
      title: '分类',
      icon: <AppstoreOutline />,
      badge: Badge.dot,
    },
    {
      key: '/app/cars',
      title: '购物车',
      icon: (active: boolean) => active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: '/app/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  return (
    <LocationProvider>
      <div>
        <Outlet></Outlet>
        <div style={{ position: 'fixed', width: '100%', bottom: '0px', backgroundColor: '#fff' }}>
          <TabBar activeKey={location.pathname}>
            {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} onClick={() => {
              navigate(item.key)
            }} />))}
          </TabBar>
        </div>
      </div>
    </LocationProvider>
  )
}
